<template>
	<div>
			<div class="First_s">
				<div class="s_ssk">
					<div class="ssk">
						<img src="../assets/jft_but_search.png" />
						<span class="ssk_text">请输入产品名称搜索</span>
					</div>
				</div>
			</div>
			<div class="First_x">
				<div class="dp">
					<img src="../assets/Main/sp1.jpg" alt="">
					<div class="dp_bt">
						<span class="dp_text">沃尔玛</span>
						<div class="dp_text2">
							<span>月售1万+</span>
							<span> 起送￥0</span>
							<span>基础运费￥5</span>
						</div>
						<span class="dp_text3">VIP尊享满89元减4元运费卷(每月3张)</span>
					</div>
				</div>
			</div>
			<div class="x_fl">
				<div class="qb">全部商品</div>
				<p>秒杀</p>
				<p>新鲜水果</p>
				<p>休闲食品</p>
				<p>时令蔬菜</p>
				<p class="jq">肉蛋家禽</p>
			</div>
			<div class="x_sp">
				<img class="tp1" src="../assets/login/spt1.jpg" alt="">
				<div class="x_text">
					<div >
						<p>番茄250g/份</p>
						<p>月售10件</p>
						<p>￥33.6 </p>
					</div>
					<p class="zk">50</p>
					<div class="tp2">
						<img src="../assets/login/jh.jpg" alt="">
					</div>
				</div>
			</div>
			<div class="x_sp">
				<img class="tp1" src="../assets/login/spt1.jpg" alt="">
				<div class="x_text">
					<div>
						<p>番茄250g/份</p>
						<p>月售10件</p>
						<p>￥33.6 </p>
					</div>
					<p class="zk">50</p>
					<div class="tp2">
						<img src="../assets/login/jh.jpg" alt="">
					</div>
				</div>
			</div>
			<div class="x_sp">
				<img class="tp1" src="../assets/login/spt1.jpg" alt="">
				<div class="x_text">
					<div>
						<p>番茄250g/份</p>
						<p>月售10件</p>
						<p>￥33.6 </p>
					</div>
					<p class="zk">50</p>
					<div class="tp2">
						<img src="../assets/login/jh.jpg" alt="">
					</div>
				</div>
			</div>
			
			<div class="Mask_zl">
				<div class="zl_tb">
					<img class="tb" src="../assets/login/xzfh.jpg" />
					<span>全选</span>
					<span>清空购物车</span>
				</div>
				<div class="zl_tb">
					<img class="tb" src="../assets/login/xzfh.jpg" />
					<span>
						<img class="zl_tp" src="../assets/icon_order.png" />
					<div>
						<div class="text_fh">
							<p>番茄250g/份</p>
							<p>￥33.6</p>
						</div>
						<span class="zk2">50</span>
						<img class="zk2_tp" src="../assets/login/jh1.jpg">
						<span>1</span>
						<img class="zk2_tp" src="../assets/login/jh.jpg">
					</div>
					</span>
				</div>
				<div class="zl_tb">
					<img class="tb" src="../assets/login/xzfh.jpg" />
					<span>
						<img class="zl_tp" src="../assets/icon_order.png" />
					<div>
						<div class="text_fh">
							<p>番茄250g/份</p>
							<p>￥33.6</p>
						</div>
						<span class="zk2">50</span>
						<img class="zk2_tp" src="../assets/login/jh1.jpg">
						<span>1</span>
						<img class="zk2_tp" src="../assets/login/jh.jpg">
					</div>
					</span>
				</div>
			</div>
			
		<div class="bottom_div">
			<img src="../assets/login/gwc1.jpg" />
			<div class="tab_div">总计<span>￥128</span> <button>去结算</button></div>
		</div>
	</div>

</template>

<script>
</script>

<style>

	.zk2_tp{
		width: 19px;
		height: 19px;
	}
	.zk2{
		padding-left: -40px;
		padding-top: 20px;
		margin-right: 280%;
		text-decoration: line-through;
		font-size: 10px;
		color: #999999;
	}
	.text_fh p{
		width: 90px;
	}
	.zl_tp{
		height: 46px;
		width: 46px;
	}
	.zl_tb :nth-child(3){
		font-size: 14px;
		margin-left: 80%;
	}
	.zl_tb :nth-child(2){
		margin-left: 8.4px;
		font-size: 14px;
		text-align: center;
		display: flex;
	}
	.zl_tb{
		margin-left: 18px;
		margin-top: 16px;
		display: flex;
		align-items: center;
	}
	.tb{
		height: 19px;
		width: 19px;
	}
	.Mask_zl{
		border: 1px solid #F8f8f8;
		height: 193px;
		margin-top: 70%;
	}
	.bottom_div img {
		height: 26px;
		width: 28px;
		margin-left: 24px;
	}

	.tab_div span {
		color: red;
	}

	.bottom_div {
		background: #ffffff;
	}

	.bottom_div .tab_div {
		text-align: start;
		height: 49px;
		line-height: 49px;
		margin-left: 24px;
		font-size: 14px;
		color: #333333;
	}

	.tab_div button {
		float: right;
		line-height: 49px;
		background-color: #4fb0f9;
		color: white;
		border: none;
		text-align: end;
		padding-right: 22px;
		width: 98px;
	}

	.zk {
		margin-left: px;
		margin-top: 49px;
		margin-left: -35px;
		margin-right: 100px;
		text-decoration: line-through;
		font-size: 10px;
		color: #999999;
	}

	.tp2 {
		width: 300px;
		margin-top: 48px;
	}

	.tp2 img {
		margin-left: 0px;
		float: right;
	}

	.x_text img {
		height: 19.5px;
		width: 19.5px;
	}

	.x_text :nth-child(3) {
		color: red;
	}

	.x_text p {

		font-size: 14px;
		margin-bottom: 6px;
	}

	.x_text {

		margin-top: 24px;
		margin-left: 16px;
		display: flex;
		float: right;
	}

	.tp1 {
		margin-left: 16px;
		margin-top: 24px;
		height: 68px;
		width: 68px;
	}

	.x_sp {

		float: left;
	}

	.x_fl :nth-child(2) {
		padding-top: 12px;
	}

	.qb {
		font-size: 14px;
		background: #FFFFFF;
		height: 40px;
		width: 76px;
		text-align: center;
	}

	.x_fl p {
		font-size: 14px;
		height: 40px;
		width: 76px;
		text-align: center;
		background-color: #f8f8f8;
	}

	.x_fl {
		margin-top: 16px;
		float: left;
	}

	.dp_text3 {
		color: red;
		font-size: 13px;
	}

	.dp_text2 span {
		margin-right: 16px;
	}

	.dp_text2 {
		margin-top: 8px;
		margin-bottom: 8px;
		font-size: 13px;
	}

	.dp_text {
		font-size: 16px;
	}

	.dp_bt {
		margin-top: 14px;
		margin-left: 16px;
	}

	.dp img {
		width: 56px;
		height: 56px;
		margin-left: 18px;
		margin-top: 14px;
	}

	.dp {
		display: flex;
	}

	.First_x {
		background-color: #FFFFFF;
	}

	.ssk span {
		font-size: 14px;
		color: #333333;
		margin-left: 12px;
	}

	.ssk img {
		height: 16px;
		width: 16px;
		margin-left: 16px;
		margin-bottom: -3px;
	}

	.s_ssk {
		display: flex;
		align-items: center;
		border-radius: 20px;
		background-color: #F8F8F8;
		margin-left: 18px;
		margin-top: 16px;
		margin-right: 18px;
		height: 32px;
	}

	.First_s {
		background-color: #FFFFFF;
	}
</style>
